<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17.导航</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>

<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
<!--      商标的样式  -->
      <a class="navbar-brand" href="#">菜鸟教程</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">iOS</a></li>
        <li><a href="#">SVN</a></li>
<!--        下拉菜单整体  -->
        <li class="dropdown">
<!--          显示头  -->
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            Java
            <b class="caret"></b>
          </a>
<!--       下拉展示的主题内容   -->
          <ul class="dropdown-menu">
            <li><a href="#">jmeter</a></li>
            <li><a href="#">EJB</a></li>
            <li><a href="#">Jasper Report</a></li>
<!--            分割线    -->
            <li class="divider"></li>
            <li><a href="#">分离的链接</a></li>
            <li class="divider"></li>
            <li><a href="#">另一个分离的链接</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<hr>


<!--面包屑-->
<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>


<!--分页导航-->
<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li class="disabled"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>



<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>